<template>
	<view class="searchPage-main">
		<view class="searchPage-input">
			<uni-search-bar
				radius="50"
				v-model="searchValue"
				style="flex: 1"
				placeholder="请输入药品名称、症状、品牌搜索"
				clearButton="always"
				cancelButton="none"
				@confirm="search"
				@cancel="search"
				@clear="clearSearch"
			/>
			<text class="searchPage-title" @click="search">搜索</text>
		</view>

		<!-- 历史搜索 -->
		<view class="searchPage-history">
			<view class="title">
				<text class="titleB">历史搜索</text>
				<u-icon name="trash-fill" color="#999" size="24" @click="clearHistory" v-if="historySearch.length > 0"></u-icon>
			</view>
			<view class="historyList" v-if="historySearch.length > 0">
				<u-tag
					:text="item.name"
					borderColor="#f3f3f3"
					bgColor="#f3f3f3"
					color="#444"
					style="margin-right: 15rpx; margin-bottom: 10rpx"
					closable
					v-for="(item, index) in historySearch"
					:key="index"
					@close="getClose(index)"
					@click="getSearchTag(item.name)"
				></u-tag>
			</view>
			<u-empty v-else mode="history" icon="http://cdn.uviewui.com/uview/empty/history.png"></u-empty>
		</view>

		<!-- 热门搜索 -->
		<view class="searchPage-hot">
			<view class="title">
				<text class="titleB">热门搜索</text>
			</view>

			<view class="historyList">
				<view class="history-item" v-for="(jitem, jindex) in hotSearch" :key="jindex" @click="getSearchTag(jitem.name)">
					<uni-icons type="fire-filled" size="20" style="margin-right: 8rpx" color="red"></uni-icons>
					<text>{{ jitem.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { cloudhotSearch } from '../../api/home/index.js';
export default {
	data() {
		return {
			// 历史搜索项
			historySearch: [],
			// 热门搜索项
			hotSearch: [],
			// 搜索内容
			searchValue: ''
		};
	},

	async onShow() {
		this.historySearch = (await uni.getStorageSync('searchTags')) || [];
		await this.getcloudhotSearch();
	},

	methods: {
		// 点击搜索
		async search() {
			if (this.searchValue) {
				const searchTagsList = await uni.getStorageSync('searchTags') || [];
				const list = searchTagsList.filter((item) => {
					return item.name == this.searchValue;
				});
				if (list.length == 0) {
					this.historySearch.push({
						name: this.searchValue
					});
				}
				uni.setStorageSync('searchTags', this.historySearch);
				uni.navigateTo({
					url: `/pages/shopping/shopping?name=${this.searchValue}`
				});
			} else {
				uni.showToast({
					title: '请输入关键词',
					icon: 'none'
				});
			}
		},

		getSearchTag(name) {
			this.searchValue = name;
			this.search();
		},

		clearSearch() {
			this.searchValue = '';
		},

		getClose(index) {
			this.historySearch.splice(index, 1);
			uni.setStorageSync('searchTags', this.historySearch);
		},

		async getcloudhotSearch() {
			this.searchValue = '';
			try {
				const resData = await cloudhotSearch();
				this.hotSearch = resData.data;
			} catch (e) {
				throw Error(e);
			}
		},

		// 清除历史搜索
		clearHistory() {
			uni.showModal({
				title: '提示',
				content: '是否清除历史记录',
				success: (res) => {
					if (res.confirm) {
						this.historySearch = [];
						uni.removeStorageSync('searchTags');
					}
				}
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>

<style scoped lang="scss">
.searchPage-main {
	.searchPage-input {
		display: flex;
		align-items: center;
		height: 100rpx;
		margin-bottom: 20rpx;
		.searchPage-title {
			margin-right: 20rpx;
			color: #444;
			font-size: 28rpx;
		}
	}

	.searchPage-history {
		box-sizing: border-box;
		padding: 20rpx;
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.titleB {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.historyList {
			display: flex;
			justify-content: flex-start;
			margin-top: 20rpx;
			flex-wrap: wrap;
			padding: 20rpx 0px;
		}
	}

	.searchPage-hot {
		box-sizing: border-box;
		padding: 20rpx;
		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.historyList {
			display: flex;
			justify-content: flex-start;
			margin-top: 20rpx;
			flex-wrap: wrap;
			padding: 20rpx 0px;

			.history-item {
				background-color: #f3f3f3;
				padding: 8rpx 24rpx;
				border-radius: 8rpx;
				margin-right: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 25rpx;
				font-size: 26rpx;
			}
		}
	}
}
</style>
